PANGASINAN STATE

UNIVERSITY

Bachelor Science in Information Technology

COURSE SYLLABUS

2nd Semester, A.Y. 2023-2024

COURSE INFORMATION

COURSE CODE

WD 101

COURSE TITLE

Web Development

COURSE TYPE

Lecture

Laboratory

Lecture & Laboratory

COURSE CREDIT

2/1

CLASS HOURS

90 hours

PRE-REQUISITE COURSE

CC104 Data Structures and Algorithms

COURSE SCHEDULE

Wednesday 2:00 PM ‐ 5:00 PM, Tuesday 4:00 PM ‐ 5:00 PM, Friday 1:00 PM ‐ 5:00 PM Tuesday 2:00 PM ‐ 3:00 PM, Wednesday 8:00 AM ‐ 11:00 AM, Friday 2:00 PM ‐ 3:00 PM

UNIVERSITY VISION, MISSION, QUALITY POLICY, INSTITUTIONAL OUTCOMES AND PROGRAM OUTCOMES

UNIVERSITY VISION

To be a leading industry-driven State University in the ASEAN region by 2030.

UNIVERSITY MISSION

The Pangasinan State University shall provide a human-centric, resilient, and sustainable academic environment to produce dynamic, responsive, and future-ready individuals capable of meeting the requirements of the local and global communities and industries.

EOMS POLICY

The Pangasinan State University shall be recognized as an ASEAN premier state university that provides quality education and satisfactory service delivery through instruction, research, extension and production. We commit our expertise and resources to produce professionals who meet the expectations of the industry and other interested parties in the national and international community. We shall continuously improve our operations in response to changing environment and in support of the institution’s strategic direction.

INSTITUTIONAL OUTCOMES

The Pangasinan State University Institutional Learning Outcomes (PSU ILO) are the qualities that PSUnians must possess. These outcomes are anchored on the following core values: Accountability and Transparency, Credibility and Integrity, Competence and Commitment to Achieve, Excellence in Service Delivery, Social and Environmental Responsiveness, and Spirituality ‐ (ACCESS).

Anchored on these core values, the PSU graduates are able to:

  1. Demonstrate through institutional mechanisms, systems, policies, and processes which are reflective of transparency, equity, participatory decision making, and accountability;

  2. Engage in relevant, comprehensive and sustainable development initiatives through multiple perspectives in decisions and actions that build personal and professional credibility and integrity.

  3. Set challenging goals and tasks with determination and sense of urgency which provide continuous improvement and producing quality outputs leading to inclusive growth;

  4. Exhibit life-long learning and global competency proficiency in communication skills, inter/interpersonal skills, entrepreneurial skills, innovative mindset, research and production initiatives and capability in meeting the industry requirements of local, ASEAN and international human capital market through relevant and comprehensive programs;

  5. Display, socially and environmentally responsive organizational culture, which ensures higher productivity among the university constituents and elevate the welfare of the multi-sectoral communities and;

  6. Practice spiritual values and morally upright behavior which promote and inspire greater harmony to project a credible public image.

FACULTY INFORMATION

NAME

Wilmar Jennie V. Motea

DESIGNATION

Faculty

E-MAIL ADDRESS

wjmotea_ms@psu.edu.ph

CONSULATION SCHEDULE

Thursday 8:00 AM ‐ 11:00 AM

OFFICE LOCATION

ICTMO Office, FVR Building

Graduate Attributes

Program Attributes

Program Outcomes Code

Program Outcomes

Performance Indicators

Knowledgeable and Skilled IT Professional

Knowledgeable for solving computing problems

IT1

Apply knowledge of computing, science, and mathematics to address real problems appropriate to the discipline (CD-2)

1) Identify or determine the techniques, tools, methodologies to be used given a particular scenario that involves computing, science, and mathematics
2) Compare different tools, techniques, methodologies as to their pros and cons that will help in decision making

IT2

Distinguish best practices and standards and their applications

1) Identify the characteristics that conforms to standards and their best practices
2) Compare and contrast tools and methodologies in terms of best practices, standard and their application

Problem Analysis

IT3

Analyze complex problems, and identify and define the computing requirements appropriate to its solution (CD-1)

1) Analyze complex problems
2) Identify and define the complexity requirements appropriate to its solution

IT4

Identify and analyze user needs and take them into account in the selection, creation, evaluation and administration of computer-based systems (CD-1) (ILO-1)

1) Analyze the user’s needs and take them into account in the selection, creation, evaluation and administration of computer‐based systems.
2) Identify the user’s requirements and take them into account in the selection, creation, evaluation and administration of computer‐based systems.

Design, development of solutions

IT5

Design, implement, and evaluate computer-based systems, processes, components, or programs to meet desired needs and requirements under various constraints (CD-3) (ILO-1)

1) Translate specification into a design
2) Design software to meet desired needs under various constraint
3) Design a database to meet desired needs for storing data under various constraints
4) Design networks to meet desired needs for sharing information under various constraints
5) Design a hardware infrastructure to meet desired processing needs under various constraints
6) Implement a network to meet desired needs for sharing information under various constraint
7) Implement database to meet desired needs for storing data under various constraint
8) Implement a software/programs to meet desired needs for task under various constraints
9) Evaluate software/programs on its functionality and level of satisfying user requirements for task under various constraint
10) Evaluate an existing network for its level of satisfying user requirements for under various constraint

IT6

Integrate IT-based solutions into the user environment effectively (CD-3) (ILO-1) (ILO-3)

1) Implement a network to meet desired needs for sharing information under various constraint
2) Implement database to meet desired needs for storing data under various constraint
3) Implement a software to meet desired needs for task under various constraints
4) Evaluate software on its functionality and level of satisfying user requirements for task under various constraint
5) Evaluate an existing network for its level of satisfying user requirements for under various constraint

Modern Tools Usage

IT7

Apply knowledge through the use of current techniques, skills, tools and practices necessary for the IT profession (CD-4)

1) Evaluate techniques, methodologies, standards/frameworks and tools for its appropriateness considering its advantages and limitations.
2) Select, use and adapt appropriate techniques, methodologies, standards/frameworks and tools

People’s Champion

Individual and Team Work

IT8

Function effectively as a member or leader of a development team recognizing the different roles within a team to accomplish a common goal (CTS-3)

Team member

1) Independently source necessary knowledge, assistance, skills and resources to complete tasks.
2) Performs tasks effectively to accomplish a common goal Leader of a team:
3) Set proper goals and timeline of activities to complete team objectives
4) Allocate task according to team member capabilities
5) Monitor task completion and performance of team member
6) Provide expertise, assistance and support to team members to achieve of team goals
7) Resolve and reduce conflicts within the team

IT9

Assist in the creation of an effective IT project plan (CTS-3) (ILO-1)

1) Perform task in the creation of an effective IT project plan
2) Create an effective IT project plan

Knowledgeable and Skilled Communicator

communication

IT10

Communicate effectively with the computing community and with society at large about complex computing activities through logical writing, presentations, and clear instructions (CTS-2) (CTH-2)

1) Interview clients to gather background information, situation, existing concerns and issues necessary to frame and achieve common understanding of problems to be addressed by computing solutions
2) Write effective reports and documentations about the results of performing specific computing and professional tasks
3) Write documentations (including design documentations) completely and comprehensively, with appropriate tone, correct grammar and construction, adapting to documentation standards, to communicate ideas, choices, assumptions, and consequences of decisions
4) Develop effective presentation material that will enhance understanding of ideas being communicated
5) Deliver presentations effectively and efficiently to various audience (computing community, society at large, and users) using English and Filipino as needed, with appropriate tone, correct grammar and construction
6) Choose appropriate language suitable to the audience and respectful to the audience background and culture
7) Provide clear instructions to team members

Community Developer

Computing Professionalism and Social Resposibility

IT1

Analyze the local and global impact of computing and information technology on individuals, organizations, and society (CTS-4) (CTH-1) (ILO-2) (ILO-5) (ILO-6)

1) Analyze the local impact of computing and information technology on individuals, organizations, and society
2) Analyze the global impact of computing and information technology on individuals, organizations, and society
3) Make design and implementation decision considering the impact of IT on individuals, organizations, and society
4) Provide /conceptualize solutions to domain where IT is needed
5) Evaluate the impact of this solutions to individuals, organizations, and society

IT12

Understand professional, ethical, legal, security and social issues and responsibilities in the utilization of information technology (CTS-4) (CTH-1) (ILO-2) (ILO-5) (ILO-6)

1) Make decisions considering professional, ethical, legal, security and social issues and responsibilities in the utilization of information technology
2) Assess professional, ethical, legal, security and social issues and responsibilities in the utilization of information technology

continuous-Innovative Learner

Life-Long Learning

IT13

Recognize the need for and engage in planning self-learning and improving performance as a foundation for continuing professional development (CTS-1) (CTH-3) (ILO-4)

1) Reflect on own abilities and skills to determine necessary development needs to reach level of expectations and aspirations as a computing professional
2) Prepare a personal development plan for continuing professional development
3) Engage independently in developmental activities (like participating in professional organizations, attendance to seminars and training) as a result of recognizing the need tofurther and continuously develop one’s competencies as a computing professional
4) Evaluate achievements and deficiencies against own’s personal development plan

COURSE DESCRIPTION

This is a beginners" course in web programming using JavaScript, together with HTML, CSS and Bootstrap. This course provides the students with the fundamental understanding of developing a simple to moderately complex websites. Using various web design concepts and techniques, students will be able to design, build and create effective, interactive and dynamic websites. The output of student"s work will be presented as a publicly accessible website, and they will submit a portfolio that maps what they have done to the course learning outcomes.

COURSE OUTCOMES

COURSE OUTCOMES (CO)
At the end of the course, the student should be able to:

PROGRAM OUTCOMES CODE (IT)

IT 1 IT 2 IT 3 IT 4 IT 5 IT 6 IT 7 IT 9 IT 10 IT 11 IT 12 IT 13
CO 1

Adapt an appropriate coding standard with proper documentation in order to come up with a readable, understandable, maintainable, and standards-compliant website.

I I I I I I I
CO 2

Design and implement a website, based on a given specification, to solve a computing problem with a well-structured and easily maintained code using

I

COURSE LEARNING PLAN

Course Outcome/s Learning Outcomes Topics Hours Learning activities (Synchronous and In-person) learning Materials and Platform Assessment

Course Orientation

  • 1. Advocate and process the VMGO of the university.

  • 2. Be familiar with the rules and policies of the university.

  • 3. Understand the grading system use by the university.

  • 4. Outline the course syllabus.

Course Orientation

  • ➢ VMGO
  • ➢ Quality Policy
  • ➢ Classroom Policies
  • ➢ Syllabus
  • ➢ Grading System

1

CO1, CO2

  • 1. Define the Internet and associated key terms

  • 2. Recognize Internet protocols

  • 3. Discuss web browsers and identify their main features

  • 4. Describe the types and purposes of websites

  • 5. Plan a website for a target audience

  • 6. Define a wireframe and a site map.

  • 7. Explain how websites use graphics, navigation tools, typography, and color

  • 8. Design for accessibility and multiplatform display

  • 9. Define Technologies Related to HTML

  • 10. Recognize HTML Versions and Web

  • 11. Identify Web Authoring Tools

Introduction to the Internet and Web Development

  • ➢ What is Internet and associated key terms?

  • ➢ Internet Protocols

  • ➢ Web Browsers

  • ➢ Types and Purposes of Websites

  • ➢ Building a Website

  • ➢ Wireframe and Site Map

  • ➢ Use of Graphics, navigation tools, typography, color and accessibility

  • ➢ Technologies Related to HTML

  • ➢ Understanding the Role of other Web Programming Languages

  • ➢ HTML Versions and Web

  • ➢ Web Authoring Tools

5

  • ➢ Lecture

  • ➢ Laboratory

➢ Study Guide

  • ➢ Quiz

  • ➢ Activity

  • ➢ Laboratory Activity

  • ➢ Recitation

CO1

  • 1. Learn the anatomy of HTML syntax and document to structure your websites.

  • 2. Learn how to insert heading levels within a web page.

  • 3. Learn how to use different formatting.

  • 4. Learn how to insert ordered and unordered lists within a web page.

  • 5. Learn how to insert a graphic within a web page.

  • 6. Learn how to create a link within a web page.

Introduction to HTML 5

  • ➢ Anatomy of an HTML Tag

  • ➢ HTML Headings

  • ➢ HTML Paragraphs

  • ➢ HTML Formatting

  • ➢ HTML Lists

  • ➢ HTML Images

  • ➢ HTML Link

6

  • ➢ Lecture

  • ➢ Laboratory

  • ➢ Study Guide

  • ➢ Quiz

  • ➢ Activity

  • ➢ Laboratory Activity

  • ➢ Recitation

CO1, CO2

  • 1. Understand the use of table.

  • 2. Learn how to use and create different forms.

Introducion of CSS 3

  • ➢ What is CSS?

  • ➢ Anatomy of a CSS

  • ➢ CSS Selectors

  • ➢ Inserting CSS

  • ➢ CSS Color

  • ➢ CSS Background

  • ➢ CSS Fonts

  • ➢ CSS Text

  • ➢ CSS Links

  • ➢ CSS Lists

  • ➢ CSS Tables

11

  • ➢ Lecture

  • ➢ Laboratory

  • ➢ Study Guide

  • ➢ Quiz

  • ➢ Activity

  • ➢ Laboratory Activity

  • ➢ Recitation

CO1

  • 1. Understand the use of table.

  • 2. Learn how to use and create different forms.

Intermediate HTML 5

  • ➢ HTML Tables

  • ➢ HTML Forms

11

  • ➢ Lecture

  • ➢ Laboratory

  • ➢ Study Guide

  • ➢ Quiz

  • ➢ Activity

  • ➢ Laboratory Activity

  • ➢ Recitation

CO1, CO2

  • 1. Understand what CSS is and learn how you can use it to style your website.

  • 2. Learn how to insert CSS in different ways.

  • 3. Learn how to use CSS selectors and properties.

  • 4. Learn how to use CSS colors in background.

  • 5. Learn how to style fonts on a web page.

Introduction to CSS 3

  • ➢ What is CSS?

  • ➢ Anatomy of a CSS

  • ➢ CSS Selectors

  • ➢ Inserting CSS

  • ➢ CSS Color

  • ➢ CSS Background

  • ➢ CSS Fonts

  • ➢ CSS Text

  • ➢ CSS Links

  • ➢ CSS Lists

  • ➢ CSS Tables

11

  • ➢ Lecture

  • ➢ Laboratory

  • ➢ Study Guide

  • ➢ Quiz

  • ➢ Activity

  • ➢ Laboratory Activity

  • ➢ Recitation

CO1, CO2

  • 1. Learn how elements are visually laid out on the web pages.

  • 2. Learn how to define outline for an element.

  • 3. Learn how to use overflow property.

  • 4. Learn how to control display property.

  • 5. Apply whether an element is visible or hidden.

  • 6. Apply the position property.

  • 7. Learn how to use z-index property.

  • 8. Apply float property to a box whether to float or not.

  • 9. Apply the opacity CSS Property.

  • 10. Understand media queries to present correctly thedifferent size of output devices

Intermediate CSS 3

  • ➢ CSS Box Model

  • ➢ CSS Outline

  • ➢ CSS Overflow

  • ➢ CSS Display

  • ➢ CSS Visibility

  • ➢ CSS Position

  • ➢ CSS Layers

  • ➢ CSS Float

  • ➢ CSS Opacity

  • ➢ CSS Media Queries

10

  • ➢ Lecture

  • ➢ Laboratory

  • ➢ Study Guide

  • ➢ Quiz

  • ➢ Activity

  • ➢ Laboratory Activity

  • ➢ Recitation